<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>后台管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- Pixel Admin's stylesheets -->
    <link href="assets/css/bootstrap/datetimepicker.css" rel="stylesheet" type="text/css">
    <link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/bootstrap-duallistbox.css" rel="stylesheet" />
    <link href="assets/css/pixel-admin.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/widgets.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/rtl.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/themes.min.css" rel="stylesheet" type="text/css">
    <link href="assets/css/grid/openplat.css" rel="stylesheet">
    <link href="assets/css/sco.css" rel="stylesheet">
    <link href="assets/css/jquery/jquery.webui-popover.min.css" rel="stylesheet">
    <link href="assets/css/morris/morris.css" rel="stylesheet">
    <link href="assets/js/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
  <style>
  .sgrid table tr {
    height: 36px
  }
  
  .z-loading-wrap {
    overflow: hidden;
    position: absolute;
    top: 45%;
    left: 50%;
    z-index: 1000;
    width: 100px;
    height: 100px;
    display: none;
    margin-left: -50px;
  }
  
  .z-loading-wrap img {
    width: 60px;
    height: 60px;
  }

  .f12{ font-size:12px !important; }
  .f14{ font-size:14px !important; }
  .f15{ font-size:14px !important; font-family:"Microsoft YaHei" }
  .f16{ font-size:16px !important; font-family:"Microsoft YaHei" }
  .f18{ font-size:18px !important; font-family:"Microsoft YaHei" }
  .f22{ font-size:22px !important; font-family:"Microsoft YaHei" }
  .f24{ font-size:24px !important; font-family:"Microsoft YaHei" }
  .f28{ font-size:28px !important; font-family:"Microsoft YaHei" }
  .f30{ font-size:30px !important; font-family:"Microsoft YaHei" }
  .fl{ float: left; }
  .fr{ float: right; }
  .cf:after { content: ""; display: block; visibility: hidden; height: 0; clear: both; }
  .cf{ zoom: 1; }
  .p0 {  padding:0px !important;}
  .p2 {  padding:2px !important;}
  .p5 {  padding:5px !important;}
  .p10 {  padding:10px !important;}
  .p15 {  padding:15px !important;}
  .p20 {  padding:20px !important;}
  .p25 {  padding:25px !important;}
  .p30 {  padding:30px !important;}

  .pt0 {  padding-top:0px !important;}
  .pt2 {  padding-top:2px !important;}
  .pt5 {  padding-top:5px !important;}
  .pt10 { padding-top:10px !important;}
  .pt15 { padding-top:15px !important;}
  .pt20 { padding-top:20px !important;}
  .pt25 { padding-top:25px !important;}
  .pt30 { padding-top:30px !important;}

  .pb0 {  padding-bottom:0px !important;}
  .pb2 {  padding-bottom:2px !important;}
  .pb5 {  padding-bottom:5px !important;}
  .pb10 { padding-bottom:10px !important;}
  .pb15 { padding-bottom:15px !important;}
  .pb20 { padding-bottom:20px !important;}
  .pb25 { padding-bottom:25px !important;}
  .pb30 { padding-bottom:30px !important;}

  .pl0 {  padding-left:0px !important;}
  .pl2 {  padding-left:2px !important;}
  .pl5 {  padding-left:5px !important;}
  .pl10 { padding-left:10px !important;}
  .pl15 { padding-left:15px !important;}
  .pl20 { padding-left:20px !important;}
  .pl25 { padding-left:25px !important;}
  .pl30 { padding-left:30px !important;}

  .pr0 {  padding-right:0px !important;}
  .pr2 {  padding-right:2px !important;}
  .pr5 {  padding-right:5px !important;}
  .pr10 { padding-right:10px !important;}
  .pr15 { padding-right:15px !important;}
  .pr20 { padding-right:20px !important;}
  .pr25 { padding-right:25px !important;}
  .pr30 { padding-right:30px !important;}

  .ma{ margin:auto;}
  .m0 { margin:0px !important;}
  .m3 { margin:3px !important;}
  .m5 { margin:5px !important;}
  .m10 {  margin:10px !important;}
  .m15 {  margin:15px !important;}
  .m20 {  margin:20px !important;}
  .m25 {  margin:25px !important;}
  .m30 {  margin:30px !important;}

  .mt0 {  margin-top:0px !important;}
  .mt3 {  margin-top:3px !important;}
  .mt5 {  margin-top:5px !important;}
  .mt10 { margin-top:10px !important;}
  .mt15 { margin-top:15px !important;}
  .mt20 { margin-top:20px !important;}
  .mt25 { margin-top:25px !important;}
  .mt30 { margin-top:30px !important;}

  .mb0 {  margin-bottom:0px !important;}
  .mb3 {  margin-bottom:3px !important;}
  .mb5 {  margin-bottom:5px !important;}
  .mb10 { margin-bottom:10px !important;}
  .mb15 { margin-bottom:15px !important;}
  .mb20 { margin-bottom:20px !important;}
  .mb25 { margin-bottom:25px !important;}
  .mb30 { margin-bottom:30px !important;}

  .ml0 {  margin-left:0px !important;}
  .ml3 {  margin-left:3px !important;}
  .ml5 {  margin-left:5px !important;}
  .ml10 { margin-left:10px !important;}
  .ml15 { margin-left:15px !important;}
  .ml20 { margin-left:20px !important;}
  .ml25 { margin-left:25px !important;}
  .ml30 { margin-left:30px !important;}

  .mr0 {  margin-right:0px !important;}
  .mr3 {  margin-right:3px !important;}
  .mr5 {  margin-right:5px !important;}
  .mr10 { margin-right:10px !important;}
  .mr15 { margin-right:15px !important;}
  .mr20 { margin-right:20px !important;}
  .mr25 { margin-right:25px !important;}
  .mr30 { margin-right:30px !important;}
  .tc{ text-align: center; }
  .tr{ text-align: right; }
  .ico-txt{ font-size: 18px; font-weight: bold; vertical-align: middle; height: 18px; line-height: 18px; display: inline-block; margin: 0 3px 0 0; }
  .va{ vertical-align: middle; } 
  .my-content{}
  .my-item{ padding:5px; } 
  .my-item-in{ padding:5px; font-size: 14px; font-weight: bold; }
  .my-item:hover{ background:#f1f9fe; }
  .age-select{ padding:6px; }
  .total-age-select{ padding:6px; }

   .arrow{ left:50% !important; }

  .my-table{ table-layout: fixed;  }
  .my-table td,.my-table th{ border: 1px solid #ddd; }
  .my-table .t-title{ padding: 10px; background:#f3f3f3;  max-width: 151px; font-weight: bold; }
  .my-table tbody tr:hover{ background: #f1f9fe; }
  .my-table .t-td{  }
  .my-table .t-td label{ width:100%; height:100%; text-align:center; display:table; }
  .my-table .t-td label i{ display: table-cell; vertical-align: middle; }
  .my-table .nosee:after{ content: "#";  visibility:hidden; display: block;  }
  .my-table .nosee{  }

  </style> 
  <script type="text/javascript"> window.jQuery || document.write("<script src='assets/js/jquery-1.12.4.min.js'>"+"<"+"/script>"); </script>
  <link href="assets/js/colorpicker/jquery.bigcolorpicker.css" rel="stylesheet">
  <script src="assets/js/colorpicker/jquery.bigcolorpicker.js"></script>
  <script src="assets/js/bootstrap/bootstrap-datetimepicker.min.js"></script>
  <script src="assets/js/bootstrap/jquery.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.bootstrap-duallistbox.js"></script>
  <script src="assets/js/jquery/jquery.webui-popover.js"></script>
  <script src="assets/js/grid/spagination.js"></script>
  <script src="assets/js/grid/sgrid.js"></script>
  <script src="assets/js/grid/model.js"></script>
  <script src="assets/js/grid/utils.js"></script>
  <script src="assets/js/util/JsUtil.js"></script>
  <script src="assets/js/util/form.js"></script> 
  <script src="assets/js/pixel-admin.min.js"></script>
  <script src="assets/js/quote.js"></script>
  <script src="assets/js/morris/raphael-min.js"></script>
  <script src="assets/js/morris/morris.min.js"></script>
  <script src="assets/js/util/ajaxupload.3.6.js"></script>
  <script src="assets/js/util/imgbox.js"></script>
  <script src="assets/js/util/md5.js"></script>
  <script src="assets/js/bootstrap-fileinput/js/fileinput.min.js"></script>
  <script src="assets/js/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
  <script src="assets/js/ueditor/ueditor.config.js" type="text/javascript"></script>
  <script src="assets/js/ueditor/ueditor.all.min.js" type="text/javascript"> </script>
  <script src="assets/js/ueditor/lang/zh-cn/zh-cn.js" type="text/javascript"></script>
  <script src="assets/js/Sco.js"></script> 

  <link href="assets/js/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
  <script src="assets/js/bootstrap-select/js/bootstrap-select.min.js"></script>  

</head>
<body class="theme-default main-menu-animated">

<div style="margin: 30px;">
  <ul class="nav nav-tabs" id="tabBtn">
    <li class="active"><a href="javascript:;">基本信息</a></li>
    <li><a href="javascript:;">比赛分类设置</a></li> 
    <li><a href="javascript:;">兼项控制</a></li> 
  </ul>
  <dl id="tabContent" style=" background: #fff; padding: 20px; ">
    <dd style="overflow: hidden; height: auto;">
      <input id="basePathId" name="basePath" type="hidden"  value="<%=basePath%>">
      <form id="submitForm" class="form-horizontal"  > 
        <div class="form-group">
          <label class="col-sm-1 control-label" for="matchName"><font
            color="red">*</font>比赛名称：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="matchName"
              name="name" placeholder="请填写比赛名称" />
          </div>
          <label class="col-sm-1 control-label" for="matchzbf"><font
            color="red">*</font>主办单位：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchzbf" id="matchzbf">
              <option value="">==协会单位==</option>
              <c:forEach items="${classifyList}" var="classify">
                <option value="${classify.id}">${classify.name}</option>
              </c:forEach>
            </select>
          </div>
         </div>
         <div class="form-group">
          <label class="col-sm-1 control-label" for="matchxz"><font
            color="red">*</font>比赛性质：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchxz" id="matchxz">
              <option value="">==请选择==</option>
              <option value="1" >社会组</option>
              <option value="2">单位组</option>
              <option value="3">其他组</option>
            </select>
          </div>
          <label class="col-sm-1 control-label" for="register"><font
            color="red">*</font>正式会员：</label>
           <div class="col-md-5">
             <select class="form-control" name="register" id="register">
               <option value="">==请选择==</option>
               <option value="1" >是</option>
               <option value="2">否</option>
             </select>
           </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label" for="matchKind"><font
              color="red">*</font>比赛分类：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchKind" id="matchKind">
              <option value="">==请选择==</option>
              <option value="1" >团体赛</option>
              <option value="2">单项赛</option>
            </select>
          </div>
          <label class="col-sm-1 control-label" for="matchLevel"><font
              color="red">*</font>比赛级别：</label>
          <div class="col-md-5">
            <select class="form-control" name="matchLevel" id="matchLevel">
              <option value="">==请选择==</option>
              <option value="1" >一星赛事</option>
              <option value="2">二星赛事</option>
              <option value="3">三星赛事</option>
              <option value="4" >四星赛事</option>
              <option value="5">五星赛事</option>
              <option value="6">六星赛事</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="matchContent" >比赛简介：</label>
          <div class="col-md-11">
            <textarea class="form-control" rows="3"  id="matchContent" name="matchContent"  placeholder="比赛简介" ></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="numbers" >比赛人数：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="numbers" name="numbers"
                 placeholder="比赛人数" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="starttime" ><font
            color="red">*</font>开始时间：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="starttime" name="starttime"
              placeholder="开始时间" />
          </div>
          <label class="col-sm-1 control-label " for="endtime" >结束时间：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="endtime" name="endtime"
              placeholder="结束时间" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-1 control-label " for="overtime" >截止日期：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="overtime" name="overtime"
              placeholder="截止日期" />
            <div id="validation-username" class="validate-error help-block"></div>
          </div>
          <label class="col-sm-1 control-label" for="status"><font color="red">*</font>状态：</label>
          <div class="col-md-5">
            <select class="form-control" name="status" id="status">
              <option value="0" selected="selected">完赛</option>
              <option value="1">未赛</option>
            </select>
          </div>
         </div>
         <div class="form-group">
          <label class="col-sm-1 control-label " for="matchAddress" >比赛地址：</label>
          <div class="col-md-11">
            <input class="form-control" type="text" id="matchAddress" name="matchAddress"
              placeholder="比赛地址" />
          </div>
          </div>
          <div class="form-group">
          <label class="col-sm-1 control-label " for="matchCpz" >裁判长：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="matchCpz" name="matchCpz"
              placeholder="裁判长" />
          </div>
          </div>
          <div class="form-group">
          <label class="col-sm-1 control-label " for="money" >参赛费：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="money" name="money"
              placeholder="参赛费" />
          </div>
          <label class="col-sm-1 control-label " for="moneys" >重复报名费：</label>
          <div class="col-md-5">
            <input class="form-control" type="text" id="moneys" name="moneys"
              placeholder="重复报名费" />
          </div>
         </div>
         <div class="form-group">
          <label class="col-sm-1 control-label" for="pic_1">形象图片：</label>
          <div class="col-md-11">
             <input id="pic_1" name="pic_1" type="file" data-show-caption="true">  
             <p class="help-block">支持jpg、jpeg、png格式，大小不超过1.0M</p> 
             <input type="hidden" id="pic_1_hidden" name="pic_1_hidden" /> 
          </div>
        </div>
      </form>
      <div style="margin: 20px 0; border-top: 1px solid #ddd; text-align: right; padding-top: 15px;"><button onclick="submit()" class="btn btn-primary btn-lg"><b class="pl20 pr20">提交</b></button> </div>
    </dd>

    <dd style="overflow: hidden; height: 0;"> 
      <div class="form-horizontal" style="min-height: 500px;"> 
        <div class="form-group">
          <label class="fl control-label ml20"><font color="red">*</font> 比赛分类：</label>
          <div class="col-md-6">
            <label class="radio-inline"><input type="radio" value="singleMatch" onclick="setMatchType()" checked="checked" name="matchType">单项赛</label>
            <label class="radio-inline ml30"><input type="radio" value="groupMatch" onclick="setMatchType()" name="matchType">团体赛</label>
            <label class="radio-inline ml30"><input type="radio" value="mixMatch" onclick="setMatchType()" name="matchType">混合赛</label>
          </div>
        </div> 
        <div id="singleMatch" class="my-container" style=" border-top: 1px solid #ddd; padding-top: 10px; margin-bottom:20px;">
          <div class="my-item cf">
            <b class="my-item-in fl">单项赛</b>
            <input type="hidden" class="name-text" value="单项赛" />
            <div class="fl handle">
              <span class="form-inline ml20">
                年龄：<select class="form-control age-select" onchange="selChange(this)"></select>
                <span style="display: none;"><input type="text" class="form-control tc age-min" style="width:50px;"> - <input type="text" class="form-control tc age-max" style="width:50px;"></span>
              </span>
              <span class="form-inline ml20">
                年龄总和：<select class="form-control total-age-select" onchange="selChange(this)"></select>
                <span style="display: none;"><input type="text" class="form-control tc age-total" style="width:50px;"></span>
              </span>
              <span class="form-inline ml20">
              跨年龄组：<span><select class="form-control age-group-selcect" title="请选择跨年龄组限制"></select></span>
              </span>
              <span class="form-inline ml20">项目设置：<span><select class="form-control multiple-selcect" title="请选择项目" multiple></select></span></span>
            </div>
            <button onclick="addItem(this,0)" class="btn btn-default fr"><b class="ico-txt">+</b><b class="va">新增</b></button>
          </div>
          <div class="my-content" style="min-height: 60px;"></div>
          <div class="mt10 cf pl10 pr5"><span class="fl my-item-in">亲子组</span><button onclick="addParentchild('singleParentchild')" class="btn btn-default fr"><b class="ico-txt">+</b><b class="va">亲子组</b></button></div>
          <div id="singleParentchild"></div>
        </div>

        <div id="groupMatch" class="my-container" style="display:none; border-top: 1px solid #ddd; padding-top: 10px;">
          <div class="my-item cf">
            <b class="my-item-in fl">团体赛</b>
            <input type="hidden" class="name-text" value="团体赛" />
            <div class="fl handle">
              <span class="form-inline ml20">
                年龄： <select class="form-control age-select" onchange="selChange(this)"></select>
                <span style="display: none;"><input type="text" class="form-control tc" style="width:50px;"> - <input type="text" class="form-control tc" style="width:50px;"></span>
              </span>
              <span class="form-inline ml20">
                年龄总和：<select class="form-control total-age-select" onchange="selChange(this)"></select>
                <span style="display: none;"><input type="text" class="form-control tc" style="width:50px;"></span>
              </span>
              <span class="form-inline ml20">
              跨年龄组：<span><select class="form-control age-group-selcect" title="请选择跨年龄组限制"></select></span>
              </span>
              <span class="form-inline ml20">项目设置：<span><select class="form-control multiple-selcect" title="请选择项目" multiple></select></span></span>
            </div>
            <button onclick="addItem(this,0)" class="btn btn-default fr"><b class="ico-txt">+</b><b class="va">新增</b></button>
          </div>
          <div class="my-content" style="min-height: 60px;"></div>
          <div class="mt10 cf pl10 pr5"><span class="fl my-item-in pl10">亲子组</span><button onclick="addParentchild('groupParentchild')" class="btn btn-default fr"><b class="ico-txt">+</b><b class="va">亲子组</b></button></div>
          <div id="groupParentchild"></div>
        </div> 
      </div>
      <div style="margin: 20px 0; border-top: 1px solid #ddd; text-align: right; padding-top: 15px;"><button onclick="submit2()" class="btn btn-primary btn-lg"><b class="pl20 pr20">提交</b></button> </div>
    </dd>

    <dd style="overflow: hidden; height: 0;">
      <div class="cf mb10">
        <label class="fl control-label" for="isJx">兼项：</label>
        <div class="fl">
          <label><input type="radio" name="concurrent" value="0" class="mr5" checked="checked" onclick="$('#isConcurrent,#maxNum').hide();" style="vertical-align: middle;" /><span style="vertical-align: middle;">否</span></label>
          <label class="ml20" ><input type="radio" name="concurrent" value="1" class="mr5"     onclick="$('#isConcurrent,#maxNum').show(); setConcurrent();" style="vertical-align: middle;" /><span style="vertical-align: middle;">是</span></label>
        </div>
        <div class="fl" id="maxNum" style="margin-left:80px; display:none;">
          最大报名数：<input type="text" onchange="" style="width: 50px; text-align:center;" ><span style="color: #999; margin-left: 10px;">(一名运动员最大的可以报名数量)</span>
        </div>
      </div>
      <div id="isConcurrent" style="display: none;">
        <div id="concurrentBox" style="border: 1px solid #ddd; height: 580px; margin: 0 auto; position: relative; ">
          <div id="tabTopCon" style="width: 100%; overflow: hidden; margin-top: -1px; position: relative; z-index: 1;"><div id="tabTop" style="width: 9999999px;"></div></div>
          <div id="tabDataCon" style="width:100%; overflow: auto; margin-top: -1px;"><div id="tabData" ></div></div>
          <div id="tabLeftTop" style="position:absolute; left: -1px; top: -1px; z-index: 3; border: 1px solid #ddd; background:#f3f3f3; "></div>
          <div id="tabLeftCon" style="position:absolute; overflow:hidden;  left: -1px; top: 0; z-index: 2; "><div id="tabLeft" style="height: 9999999px;"></div></div>
        </div>
        <div style="margin: 20px 0; border-top: 1px solid #ddd; text-align: right; padding-top: 15px;"><button onclick="submit3()" class="btn btn-primary btn-lg"><b class="pl20 pr20">提交</b></button> </div>
      </div>
    </dd>

  </dl>
</div>
<script type="text/javascript">
  $(function(){
    $("#tabBtn li").on("click",function(){
      var n = $(this).index();
      $("#tabContent > dd").eq(n).css({ height:'auto' });
      $("#tabContent > dd").eq(n).siblings("dd").css({ height:'0' });
      $(this).addClass("active");
      $(this).siblings("li").removeClass("active");
    });

    $(".age-select").html(getAgeOption());
    $(".sex-select").html(getSexOption());
    $(".total-age-select").html(getTotalAgeOption());
    $(".age-group-selcect").html(getAgeGroupOption());

    $(".multiple-selcect").html(getProject());
    $(".multiple-selcect").selectpicker({ width: 150 });

    //设置兼项
    initMatchType()
  })

  function initMatchType(){
    var data = [
        {
            "name": "单项赛",
            "matchType": "single",
            "children": [
                {
                    "name": "少年组",
                    "children": [
                        {
                            "ageMin": "10",
                            "ageMax": "14",
                            "ageTotal": "24",
                            "projects": [
                                "MANDOUBLE",
                                "MANSINGLE",
                                "MIXDOUBLE",
                                "WOMENDOUBLE",
                                "WOMENSINGLE",
                                "UNLIMITDOUBLE"
                            ],
                            "name": "10-14"
                        },
                        {
                            "ageMin": "15",
                            "ageMax": "18",
                            "ageTotal": "33",
                            "projects": [
                                "MANDOUBLE",
                                "MANSINGLE",
                                "MIXDOUBLE",
                                "WOMENDOUBLE",
                                "WOMENSINGLE",
                                "UNLIMITDOUBLE"
                            ],
                            "name": "15-18"
                        }
                    ]
                },
                {
                    "name": "成年组",
                    "children": [
                        {
                            "name": "业余组",
                            "children": [
                                {
                                    "ageMin": "18",
                                    "ageMax": "27",
                                    "ageTotal": "45",
                                    "projects": [
                                        "MANDOUBLE",
                                        "MANSINGLE",
                                        "MIXDOUBLE",
                                        "WOMENDOUBLE",
                                        "WOMENSINGLE"
                                    ],
                                    "name": "18-27"
                                },
                                {
                                    "ageMin": "28",
                                    "ageMax": "40",
                                    "ageTotal": "68",
                                    "projects": [
                                        "MANDOUBLE",
                                        "MANSINGLE",
                                        "MIXDOUBLE",
                                        "WOMENDOUBLE",
                                        "WOMENSINGLE"
                                    ],
                                    "name": "28-40"
                                },
                                {
                                    "ageMin": "41",
                                    "ageMax": "59",
                                    "ageTotal": "100",
                                    "projects": [
                                        "MANDOUBLE",
                                        "MANSINGLE",
                                        "MIXDOUBLE",
                                        "WOMENDOUBLE",
                                        "WOMENSINGLE",
                                        "UNLIMITDOUBLE"
                                    ],
                                    "name": "41-59"
                                }
                            ]
                        },
                        {
                            "name": "专业组",
                            "children": [
                                {
                                    "ageMin": "18",
                                    "ageMax": "27",
                                    "ageTotal": "45",
                                    "projects": [
                                        "MANDOUBLE",
                                        "MANSINGLE",
                                        "MIXDOUBLE",
                                        "WOMENDOUBLE",
                                        "WOMENSINGLE"
                                    ],
                                    "name": "18-27"
                                },
                                {
                                    "ageMin": "28",
                                    "ageMax": "40",
                                    "ageTotal": "68",
                                    "projects": [
                                        "MANDOUBLE",
                                        "MANSINGLE",
                                        "MIXDOUBLE",
                                        "WOMENDOUBLE",
                                        "WOMENSINGLE"
                                    ],
                                    "name": "28-40"
                                },
                                {
                                    "ageMin": "41",
                                    "ageMax": "59",
                                    "ageTotal": "100",
                                    "projects": [
                                        "MANDOUBLE",
                                        "MANSINGLE",
                                        "MIXDOUBLE",
                                        "WOMENDOUBLE",
                                        "WOMENSINGLE",
                                        "UNLIMITDOUBLE"
                                    ],
                                    "name": "41-59"
                                }
                            ]
                        }
                    ]
                },
                {
                    "name": "老年组",
                    "children": [
                        {
                            "ageMin": "60",
                            "ageMax": "69",
                            "ageTotal": "129",
                            "projects": [
                                "MANDOUBLE",
                                "MANSINGLE",
                                "MIXDOUBLE",
                                "WOMENDOUBLE",
                                "WOMENSINGLE",
                                "UNLIMITDOUBLE",
                                "MANTHREE",
                                "WOMENTHREE",
                                "MIXTHREE"
                            ],
                            "name": "60-69"
                        },
                        {
                            "ageMin": "70",
                            "ageMax": "79",
                            "ageTotal": "149",
                            "projects": [
                                "MANDOUBLE",
                                "MANSINGLE",
                                "MIXDOUBLE",
                                "WOMENDOUBLE",
                                "WOMENSINGLE",
                                "UNLIMITDOUBLE",
                                "MANTHREE",
                                "WOMENTHREE",
                                "MIXTHREE"
                            ],
                            "name": "70-79"
                        }
                    ]
                }
            ],
            "parentchild": [
                {
                    "parentAgeMin": "30",
                    "parentAgeMax": "50",
                    "childrenAgeMin": "10",
                    "childrenAgeMax": "18",
                    "name": "父女组",
                    "sex": "male-female"
                },
                {
                    "parentAgeMin": "30",
                    "parentAgeMax": "50",
                    "childrenAgeMin": "10",
                    "childrenAgeMax": "18",
                    "name": "母子组",
                    "sex": "female-male"
                }
            ]
        }
    ]

    for (var i = 0; i < data.length; i++) {
      if(data[i]["matchType"] == "single"){
        
      }else if(data[i]["matchType"] == "group"){
        
      }
    }
  }

  function setMatchType(){
    var type = $("input[name='matchType']:checked").val();
    if(type == "singleMatch"){      
      $("#singleMatch").show();
      $("#groupMatch").hide();
    }else if(type == "groupMatch"){
      $("#groupMatch").show();
      $("#singleMatch").hide();
    }else if(type == "mixMatch"){
      $("#singleMatch,#groupMatch").show();
    }
  }
  
  function addItem(that,n){
    var addBtn = ''
    if(n < 2){
     addBtn = ' <button onclick="addItem(this,'+ (n+1) +')" class="btn btn-default"><b class="ico-txt">+</b><b class="va">新增</b></button>' 
    }
    var str = '<div class="my-container">'
             +'<div class="my-item cf" style="padding-left:' + (30*n) + 'px">'
             +'   <div class="fl pl5">'
             +'     <span class="form-inline"><input type="text" class="form-control name-text" placeholder="请输入分组名称" style="width:150px;"></span>'
             +'   </div>'
             +'   <div class="fl handle">'
             +'     <span class="form-inline ml20">'
             +'       年龄： <select class="form-control age-select" style="width:80px;" onchange="selChange(this)">'+ getAgeOption() +'</select>'
             +'       <span style="display: none;"><input type="text" class="form-control tc age-min" style="width:50px;"> - <input type="text" class="form-control tc age-max" style="width:50px;"></span>'
             +'     </span>'
             +'     <span class="form-inline ml20">'
             +'       年龄总和：<select class="form-control total-age-select" style="width:80px;" onchange="selChange(this)">'+ getTotalAgeOption() +'</select>'
             +'       <span style="display: none;"><input type="text" class="form-control tc age-total" style="width:50px;"></span>'
             +'     </span>'
             +'     <span class="form-inline ml20">'
             +'       跨年龄组：<span><select class="form-control age-group-selcect" title="请选择跨年龄组限制">'+ getAgeGroupOption() +'</select></span>'
             +'     </span>'
             +'     <span class="form-inline ml20">'
             +'       项目设置：<span><select class="form-control multiple-selcect" title="请选择项目" multiple>'+ getProject() +'</select></span>'
             +'     </span>'
             +'   </div>'
             +'   <div class="fr">' + addBtn
             +'     <button onclick="removeItem(this)" class="btn btn-default"><b class="ico-txt">×</b><b class="va">删除</b></button>'
             +'   </div>'
             +'</div>'
             +'<div class="my-content"></div>'
             +'</div>';
    $(that).closest('.my-item').next(".my-content").append(str);
    $(that).closest('.my-item').next(".my-content").find(".multiple-selcect").selectpicker({ width: 150 });
    $(that).closest('.my-item').find(".handle").hide();
  }

  function removeItem(that){
    var node = $(that).closest('.my-container');
    var parent = node.closest(".my-content"); 
    node.remove();
    if(parent.children('.my-container').length == 0){ 
      parent.prev(".my-item").find(".handle").show();
    }
  }

  //添加亲子组
  function addParentchild(id){
    var str = '<div class="my-item cf">'
            +'  <div class="fl pl5"><span class="form-inline"><input type="text" class="form-control name-text" placeholder="请输入分组名称" style="width:200px;"></span></div>'
            +'  <div class="fl form-inline ml20">'
            +'    项目：<select class="form-control sex-select" onchange="selChange(this)">' + getParentchildSexOption() + '</select>'
            +'  </div>'
            +'  <div class="fl form-inline ml20">'
            +'    家长年龄：<select class="form-control p-age-select" onchange="selChange(this)">' + getAgeOption() + '</select>'
            +'    <span style="display: none;"><input type="text" class="form-control tc p-age-min" style="width:50px;"> - <input type="text" class="form-control tc p-age-max" style="width:50px;"></span>'
            +'  </div>' 
            +'  <div class="fl form-inline ml20">'
            +'    孩子年龄：<select class="form-control c-age-select" onchange="selChange(this)">' + getAgeOption() + '</select>'
            +'    <span style="display: none;"><input type="text" class="form-control tc c-age-min" style="width:50px;"> - <input type="text" class="form-control tc c-age-max" style="width:50px;"></span>'
            +'  </div>'
            +'  <div class="fr">'
            +'    <button onclick="removeParentchild(this)" class="btn btn-default"><b class="ico-txt">×</b><b class="va">删除</b></button>'
            +'  </div>'
            +'</div>'
    $("#"+id).append(str);
  }

  //删除亲子组
  function removeParentchild(that){
    var node = $(that).closest('.my-item');
    node.remove();
  }

  function selChange(that){
    if($(that).val() == "0"){
      $(that).next().show();
    }else{
      $(that).next().hide();
    }
  }

  function getSexOption(){
    var str = "<option value=''>请选择</option>";
    var arr = [
      {"text":"男","val":"male"},
      {"text":"女","val":"female"}, 
      {"text":"不限","val":"unlimit"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }

  function getAgeOption(){
    var str = "<option value=''>请选择</option>";
    var arr = [
      {"text":"10-19岁","val":"10-19"},
      {"text":"20-29岁","val":"20-29"},
      {"text":"30-39岁","val":"30-39"},
      {"text":"40-49岁","val":"40-49"},
      {"text":"50-59岁","val":"50-59"},
      {"text":"60-69岁","val":"60-69"},
      {"text":"70-79岁","val":"70-79"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    str += '<option value="0">自定义</option>'
    return str;
  }

  function getTotalAgeOption(){    
    var str = "<option value=''>请选择</option>";
    var arr = [
      {"text":"40岁","val":"40"},
      {"text":"50岁","val":"50"},
      {"text":"60岁","val":"60"},
      {"text":"70岁","val":"70"},
      {"text":"80岁","val":"80"},
      {"text":"90岁","val":"90"},
      {"text":"100岁","val":"100"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    str += '<option value="0">自定义</option>'
    return str;
  }

  function getAgeGroupOption(){
    var str = "<option value='0'>不允许</option>";
    var arr = [
      {"text":"升组","val":"1"},
      {"text":"降组","val":"2"},
      {"text":"不限","val":"3"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }

  function getProject(){
    var str = "";
    var arr = [
      {"text":"男双","val":"MANDOUBLE"},
      {"text":"男单","val":"MANSINGLE"},
      {"text":"混双","val":"MIXDOUBLE"},
      {"text":"女双","val":"WOMENDOUBLE"},
      {"text":"女单","val":"WOMENSINGLE"},
      {"text":"无差别双打","val":"UNLIMITDOUBLE"},
      {"text":"男子3V3","val":"MANTHREE"},
      {"text":"女子3V3","val":"WOMENTHREE"},
      {"text":"混合3V3","val":"MIXTHREE"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }

  function getParentchildSexOption(){
    var str = "";
    var arr = [
      {"text":"不限","val":"unlimit"},
      {"text":"父子双打","val":"male-male"},
      {"text":"母子双打","val":"female-male"},
      {"text":"父女双打","val":"male-female"},
      {"text":"母女双打","val":"female-female"}
    ];
    for (var i = 0; i < arr.length; i++) {
      str += '<option value="'+ arr[i]["val"] +'">' + arr[i]["text"] + '</option>'
    }
    return str;
  }

  function getParentchild(id){
    var list = $("#"+id).find(".my-item");
    var arr = [];
    var reg = /^(0|([1-9]\d*))$/;
    for (var i = 0,len = list.length; i < len; i++) {
      var obj = {};
      var item = list.eq(i);
      var name = $.trim(item.find('.name-text').eq(0).val());
      var sex = item.find('.sex-select').eq(0).val();
      var parentAge = item.find('.p-age-select').eq(0).val();
      var childrenAge = item.find('.c-age-select').eq(0).val();

      if(name == ""){
        getTree.fail = true;
        popover(item.find(".name-text").eq(0),'请输入名称');
        return;
      }

      if(parentAge != ""){      //家长年龄
        if(parentAge == "0"){       //自定义
          var min = $.trim(item.find(".p-age-min").eq(0).val());
          var max = $.trim(item.find(".p-age-max").eq(0).val());

          if(!reg.test(min)){
            getTree.fail = true;
            popover(item.find(".p-age-min").eq(0),'请输入正确数字');
            return;
          }

          if(!reg.test(max)){
            getTree.fail = true; 
            popover(item.find(".p-age-max").eq(0),'请输入正确数字');
            return;
          }

          obj.parentAgeMin = min;
          obj.parentAgeMax = max;

        }else{
          var pArr = parentAge.split('-');
          obj.parentAgeMin = pArr[0];
          obj.parentAgeMax = pArr[1];
        }
      }else{
        obj.parentAgeMin = "";
        obj.parentAgeMax = "";
      }

      if(childrenAge != ""){    //孩子年龄
        if(childrenAge == "0"){       //自定义
          var min = $.trim(item.find(".c-age-min").eq(0).val());
          var max = $.trim(item.find(".c-age-max").eq(0).val());

          if(!reg.test(min)){
            getTree.fail = true;
            popover(item.find(".c-age-min").eq(0),'请输入正确数字');
            return;
          }

          if(!reg.test(max)){
            getTree.fail = true; 
            popover(item.find(".c-age-max").eq(0),'请输入正确数字');
            return;
          }

          obj.childrenAgeMin = min;
          obj.childrenAgeMax = max;
          
        }else{
          var cArr = childrenAge.split('-');
          obj.childrenAgeMin = cArr[0];
          obj.childrenAgeMax = cArr[1];
        }

      }else{
        obj.childrenAgeMin = "";
        obj.childrenAgeMax = "";
      }

      obj.name = name;
      obj.sex = sex;
      arr.push(obj);
    }
    return arr;
  }

  function getTree(node){
    var obj = { }; 
    var name = $.trim($(node).children(".my-item").eq(0).find("input.name-text").eq(0).val()); 
    var item = $(node).children(".my-item").eq(0).find(".handle").eq(0);
    var list = $(node).children(".my-content").eq(0).children(".my-container");
    var children = [];

    if(name == ""){
      getTree.fail = true;
      popover($(node).children(".my-item").eq(0),'请输入分组名称');
      return;
    }

    if(item.is(":visible")){   
      var data = {};
      var ageSelect = item.find(".age-select").eq(0).val();
      var totalAgeSelect = item.find(".total-age-select").eq(0).val();
      var multipleSelect = item.find("select.multiple-selcect").eq(0).val();
      var reg = /^(0|([1-9]\d*))$/;

      if(ageSelect != ""){   //年龄限制
        if(ageSelect == "0"){       //自定义
          var min = $.trim(item.find(".age-min").eq(0).val());
          var max = $.trim(item.find(".age-max").eq(0).val());

          if(!reg.test(min)){
            getTree.fail = true;
            popover(item.find(".age-min").eq(0),'请输入正确数字');
            return;
          }

          if(!reg.test(max)){
            getTree.fail = true; 
            popover(item.find(".age-max").eq(0),'请输入正确数字');
            return;
          }

          obj.ageMin = min;
          obj.ageMax = max;
        }else{
          var arr = ageSelect.split('-');
          obj.ageMin = arr[0];
          obj.ageMax = arr[1];
        }
      }else{
        obj.ageMin = '';
        obj.ageMax = '';
      }

      if(totalAgeSelect != ""){    //年龄总和限制
        if(totalAgeSelect == "0"){   //自定义 
          var total = $.trim(item.find(".age-total").eq(0).val());
          if(!reg.test(total)){
            getTree.fail = true;
            popover(item.find(".age-total").eq(0),'请输入正确数字');
            return;
          }
          obj.ageTotal = total;
        }else{
          obj.ageTotal = totalAgeSelect;
        }
      }else{
        obj.ageTotal = '';
      }

      if(multipleSelect == null){
        getTree.fail = true;
        popover(item.find("select.multiple-selcect").eq(0).parent(),'请选择项目');
      }

      obj.projects = multipleSelect; 
    }

    if(list.length > 0){      
      for(var i=0,len=list.length; i < len; i++){
        children.push(getTree(list.eq(i)));
      } 
    }

    obj.name = name;
    if(children.length > 0){
      obj.children = children;
    }
    return obj;
  }

  function popover(node,text){
    node.webuiPopover({ content:text,width:150 }).webuiPopover("show"); 
    setTimeout(function(){
       node.webuiPopover("destroy"); 
    },1500);
  }

  function testNum(that){
    $("")
  }
  
  //兼项控制
  function setConcurrent(){
    // var arr = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    var arr = [{id:"A",text:"项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目项目A"},{id:"B",text:"项目B"},{id:"C",text:"项目C"},{id:"D",text:"项目D"},{id:"E",text:"项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E项目E"},{id:"F",text:"项目F项目F项目F项目F项目F"},{id:"G",text:"项目G"},{id:"H",text:"项目H"},{id:"I",text:"项目I"},{id:"J",text:"项目J"},{id:"K",text:"项目K"},{id:"L",text:"项目L"},{id:"M",text:"项目M"},{id:"N",text:"项目N"},{id:"O",text:"项目O"},{id:"P",text:"项目P"},{id:"Q",text:"项目Q"},{id:"R",text:"项目R"},{id:"S",text:"项目S"},{id:"T",text:"项目T"},{id:"U",text:"项目U"},{id:"V",text:"项目V"},{id:"W",text:"项目W"},{id:"X",text:"项目X"},{id:"Y",text:"项目Y"},{id:"Z",text:"项目Z"}];
    var body = '';
    var head = ''; // '<th class="t-title nosee"></th>'
    var left = '';
    for (var i = 0; i < arr.length; i++) {
      head += '<th class="t-title">'+ arr[i]["text"] +'</th>';
      left += '<tr><td class="t-title"><div>'+ arr[i]["text"] +'</div></td></tr>';
    }
    head = '<tr>' + head + '</tr>';
    for (var i = 0; i < arr.length; i++) {
      var str = ''; 
      for (var j = 0; j < arr.length; j++) {
        var input = '';
        if(i <= j){
          str += '<td class="t-td nosee"></td>'; 
        }else{
          str += '<td class="t-td"><label><i><input type="checkbox" value="'+ arr[i]["id"] +  '-' + arr[j]["id"] + '" /><i></label></td>';
        }
      }
      body += '<tr>' + str + '</tr>';  // <td class="t-title"><div>'+ arr[i]["text"] +'</div></td>
    }

    $("#tabTop").html('<table class="my-table"><thead>'+ head + '</thead></table>'); 
    $("#tabLeft").html('<table class="my-table"><tbody>' + left + '</tbody></table>');
    $("#tabData").html('<table class="my-table"><tbody>' + body + '</tbody></table>');  

    $("#tabData td").hover(function(){ 
      var n = $(this).index();
      var m = $(this).parent("tr").index();
      var list = $(this).parent("tr").siblings('tr');
      $("#tabTop th").eq(n).css({ background:"#ceebfd" });
      $("#tabLeft td").eq(m).css({ background:"#ceebfd" });
      list.each(function(){
        $(this).find("td").eq(n).css({ background:"#f1f9fe" });
      });
    },function(){
      var n = $(this).index();
      var m = $(this).parent("tr").index();
      var list = $(this).parent("tr").siblings('tr');
      $("#tabTop th").eq(n).css({ background:"" });
      $("#tabLeft td").eq(m).css({ background:"" });
      list.each(function(){
        $(this).find("td").eq(n).css({ background:"" });
      });      
    })

    setTableLayout();
    $(window).resize(function(){
      setTableLayout();
    })
  }

  function setTableLayout(){
    $("#tabData table").eq(0).css({ width : $("#tabTop table").eq(0).outerWidth() });
    $("#tabTop th").each(function(i){
      $("#tabData tr").eq(0).find("td").eq(i).css({ width:$(this).outerWidth() });
    });

    $("#tabData table").eq(0).css({ height: $("#tabLeft table").eq(0).outerHeight() }); 
    $("#tabLeft tr").each(function(i){
      $("#tabData tr").eq(i).find("td").css({ height: $(this).outerHeight() });
    })

    $("#tabLeft table").eq(0).css({ height: $("#tabData table").eq(0).outerHeight() });
    $("#tabData tr").each(function(i){
      $("#tabLeft tr").eq(i).find("td").css({ height: $(this).outerHeight() });
    })

    $("#tabDataCon").css({height : $("#tabDataCon").parent().outerHeight() - $("#tabTopCon").outerHeight() })
    $("#tabTopCon,#tabDataCon").css({ marginLeft: $("#tabLeftCon").outerWidth() - 2 , width: $("#tabTopCon").parent().width() - $("#tabLeftCon").outerWidth() + 2 });

    $("#tabLeftCon").css({ height: $("#tabDataCon").height() , top:$("#tabTop").outerHeight() - 2 });
    $("#tabLeftTop").css({ height: $("#tabTop").outerHeight() , width :$("#tabLeftCon").outerWidth() });

    $("#tabDataCon").scroll(function(){
      $("#tabTopCon").scrollLeft($("#tabDataCon").scrollLeft());
      $("#tabLeftCon").scrollTop($("#tabDataCon").scrollTop()); 
    })
  }


  function submit2(){
    getTree.fail = false;
    var matchType = $("input[name='matchType']:checked").val();
    var level = [];
    if(matchType == "singleMatch"){

      var singleObj = getTree($("#singleMatch"));
      singleObj.matchType = "single";
      singleObj.parentchild = getParentchild("singleParentchild");
      level.push(singleObj);

    }else if(matchType == "groupMatch"){

      var groupObj = getTree($("#groupMatch"));
      groupObj.matchType = "group";
      groupObj.parentchild = getParentchild("groupParentchild");
      level.push(groupObj);

    }else if(matchType == "mixMatch"){ 
      
      var singleObj = getTree($("#singleMatch"));
      singleObj.matchType = "single";
      singleObj.parentchild = getParentchild("singleParentchild");
      level.push(singleObj);

      var groupObj = getTree($("#groupMatch"));
      groupObj.matchType = "group";
      groupObj.parentchild = getParentchild("groupParentchild");
      level.push(groupObj);

    }

    if(getTree.fail){   //验证失败 
      return;
    }
    console.log(JSON.stringify(level)); 
  }

  function submit3(){
    var arr =  []
    var list = $("#tabData").find("input:checked").each(function(){
      arr.push($(this).val());
    })

    console.log(arr);
    
  }
</script>

</div> 
</body>
</html>